<template>
  <div class="data-source">
    <div class="top">
      <div class="value-list">
        <div class="title">
          <div class="text">变量列表:</div>
          <div class="btn">
            <el-button text :icon="Plus" size="small" @click="handleAddValue"
              >新建</el-button
            >
          </div>
        </div>
        <div class="list">
          <templale v-for="(item, index) of componentValueList">
            <div class="item" :key="index">
              <div class="left">
                <div class="text">变量</div>
                <div class="name">{{ item.name }}</div>
              </div>
              <div class="right">
                <div class="icon" @click="handleEditValue(item, index)">
                  <el-icon color="#848486">
                    <Edit />
                  </el-icon>
                </div>
                <div class="icon" @click="handleDeleteValue(index)">
                  <el-icon color="#848486">
                    <Delete />
                  </el-icon>
                </div>
              </div>
            </div>
          </templale>
        </div>
      </div>
      <!-- 弹窗 -->
      <VariableList
        :options="ValueOptions"
        @onCancel="closeValueDialog"
        @onSure="onValueSure"
      />
    </div>
    <div class="bottom">
      <div class="value-list">
        <div class="title">
          <div class="text">函数列表:</div>
          <div class="btn">
            <el-button text :icon="Plus" size="small" @click="handleAddFuntion"
              >新建</el-button
            >
          </div>
        </div>
        <div class="list">
          <templale v-for="(item, index) of componentFuntionList">
            <div class="item" :key="index">
              <div class="left">
                <div class="func">函数</div>
                <div class="name">{{ item.name }}</div>
              </div>
              <div class="right">
                <div class="icon" @click="handleEditFunc(item, index)">
                  <el-icon color="#848486">
                    <Edit />
                  </el-icon>
                </div>
                <div class="icon" @click="handleDeleteFunc(index)">
                  <el-icon color="#848486">
                    <Delete />
                  </el-icon>
                </div>
              </div>
            </div>
          </templale>
        </div>
      </div>
      <!-- 弹窗 -->
      <FuncList
        :options="FuncOptions"
        @onCancel="closeFuncDialog"
        @onSure="onFuncSure"
      />
    </div>
  </div>
</template>

<script setup name="DataSource">
import { computed, reactive, toRefs } from "vue"
import { useStore } from "vuex"
import { Edit, Delete, Plus } from "@element-plus/icons-vue"
import VariableList from "./component/variableList.vue"
import FuncList from "./component/funcList.vue"
import { useMessage } from "@lowcode/hooks/useMessage.js"

const { createMessage, createConfirm } = useMessage()

const store = useStore()
let componentValueList = computed(
  () => store.state.chartEditStore.componentValueList
)
let componentFuntionList = computed(
  () => store.state.chartEditStore.componentFuntionList
)

const data = reactive({
  ValueOptions: {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curVariable: null,
  },
  FuncOptions: {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curFunction: null,
  },
})

// 添加
const handleAddValue = () => {
  data.ValueOptions = {
    show: true,
    type: "add", // 用于判断是编辑还是删除 add edit
    curVariable: null,
  }
}
// 编辑
const handleEditValue = async (item, index) => {
  data.ValueOptions = {
    show: true,
    type: "edit",
    curVariable: item,
    index: index,
  }
}
// 删除
const handleDeleteValue = index => {
  createConfirm("confirm", `是否删除？`, "提示", {
    confirmButtonText: "确 定",
    cancelButtonText: "取 消",
    type: "warning",
  })
    .then(() => {
      store.commit("chartEditStore/SET_COMPONENT_VALUE_LIST", {
        type: "delete",
        value: {
          index: index,
        },
      })
    })
    .catch(() => {})
}
// 关闭变量弹框
const closeValueDialog = () => {
  data.ValueOptions = {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curVariable: null,
  }
}
// 保存变量弹框
const onValueSure = async options => {
  if (options.type === "add") {
    await store.commit("chartEditStore/SET_COMPONENT_VALUE_LIST", {
      type: "add",
      value: {
        name: options.name,
        value: options.value,
        valueType: options.valueType,
      },
    })
    createMessage("新增变量成功", "success")
  } else {
    await store.commit("chartEditStore/SET_COMPONENT_VALUE_LIST", {
      type: "edit",
      value: {
        name: options.name,
        value: options.value,
        index: options.index,
        valueType: options.valueType,
      },
    })
    createMessage("编辑变量成功", "success")
  }
  closeValueDialog()
}

// 函数
// 添加
const handleAddFuntion = () => {
  data.FuncOptions = {
    show: true,
    type: "add", // 用于判断是编辑还是删除 add edit
    curFunction: null,
  }
}
// 编辑
const handleEditFunc = (item, index) => {
  data.FuncOptions = {
    show: true,
    type: "edit",
    curFunction: item,
    index: index,
  }
}
// 删除
const handleDeleteFunc = index => {
  createConfirm("confirm", `是否删除？`, "提示", {
    confirmButtonText: "确 定",
    cancelButtonText: "取 消",
    type: "warning",
  }).then(() => {
    store.commit("chartEditStore/SET_COMPONENT_FUNTION_LIST", {
      type: "delete",
      value: {
        index: index,
      },
    })
  })
}
// 关闭函数弹框
const closeFuncDialog = () => {
  data.FuncOptions = {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curFunction: null,
  }
}
// 保存函数弹框
const onFuncSure = async options => {
  if (options.type === "add") {
    await store.commit("chartEditStore/SET_COMPONENT_FUNTION_LIST", {
      type: "add",
      value: {
        name: options.name,
        value: options.value,
        remark: options.remark,
      },
    })
    createMessage("新增函数成功", "success")
  } else {
    await store.commit("chartEditStore/SET_COMPONENT_FUNTION_LIST", {
      type: "edit",
      value: {
        name: options.name,
        value: options.value,
        remark: options.remark,
        index: options.index,
      },
    })
    createMessage("编辑函数成功", "success")
  }
  closeValueDialog()
}

const { ValueOptions, FuncOptions } = toRefs(data)
</script>

<style lang="scss" scoped>
.data-source {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .top,
  .bottom {
    flex: 1;
  }
  .value-list {
    // height: 100%;
    margin-bottom: 5px;
    .title {
      height: 30px;
      display: flex;
      justify-content: space-between;
      .text {
        color: rgba(0, 0, 0, 0.6);
        font-weight: bold;
        font-size: 14px;
      }
    }
    .list {
      padding: 5px;
      height: 250px;
      border: 1px solid #ccc;
      overflow: auto;
      .item {
        padding: 3px 10px;
        border: 1px solid rgba(31, 56, 88, 0.1);
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        margin-bottom: 5px;
        .left {
          flex: 4;
        }
        .right {
          flex: 1;
          display: flex;
          justify-content: space-around;
          .icon {
            cursor: pointer;
          }
        }
        .left,
        .right {
          display: flex;
          align-items: center;
          .text,
          .func {
            color: #66bc5c;
            font-weight: bold;
            margin-right: 10px;
          }
          .name {
            color: rgba(0, 0, 0, 0.6);
            font-weight: bold;
          }
          .func {
            color: #ff9900;
          }
        }
      }
    }
  }
}
</style>
